<!DOCTYPE html>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>2022/2/14</title>

		<link type="text/css" rel="stylesheet" href="./index_files/default.css">
		<script type="text/javascript" src="./index_files/jquery.min.js"></script>
		<script type="text/javascript" src="./index_files/jscex.min.js"></script>
		<script type="text/javascript" src="./index_files/jscex-parser.js"></script>
		<script type="text/javascript" src="./index_files/jscex-jit.js"></script>
		<script type="text/javascript" src="./index_files/jscex-builderbase.min.js"></script>
		<script type="text/javascript" src="./index_files/jscex-async.min.js"></script>
		<script type="text/javascript" src="./index_files/jscex-async-powerpack.min.js"></script>
		<script type="text/javascript" src="./index_files/functions.js" charset="utf-8"></script>
		<script type="text/javascript" src="./index_files/love.js" charset="utf-8"></script>
		<script src="js/lib/jquery.fireworks.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="page_two" style="background-color: aqua;">
			<div class="type_words"></div>
		</div>
		<div id="main">
			<div id="wrap">
				<div id="text">
					<div id="code">
						<span class="say">情人节快乐！！！</span><br>
						<span class="say"> </span><br>
						<span class="say">虽然今天的月亮不圆</span><br>
						<span class="say"> </span><br>
						<span class="say">但月色很美</span><br>
						<span class="say"> </span><br>
						<span class="say">来看一场烟花吧，等不禁放了，去迪士尼看真的</span><br>
						<span class="say"> </span><br>
						<span class="say">希望接下来的日子，能够像它们一样灿烂</span><br>
						<span class="say"> </span><br>
						<span class="say">无论相隔还是相见</span><br>
						<span class="say"> </span><br>
						<span class="say">我们共享这片天空时，你永远是我的白月光</span><br>
						<span class="say"> </span><br>
						<span class="say">The moon is so beautiful and the wind is gentle</span><br>
						<span class="say"> </span><br>
						<span class="say">A better us will always meet</span><br>
						<span class="say"> </span><br>
						<span class="say">I love you @cxm and I always will</span><br>
						<span class="say"> </span><br>
						<span class="say"><span class="space"></span>from @gjy</span>
					</div>
				</div>
				<div id="clock-box">
					<span class="STYLE1">现在是我们</span> <span class="STYLE1" style="color: red">❤</span><span
						class="STYLE1" style="color: red"></span>
					<div id="clock"></div>
				</div>
				<canvas id="canvas" width="1100" height="680"></canvas>
			</div>

		</div>

		<script>
			function fireworks() {
				$('.page_two').removeClass('hide');
				$('.page_two').fireworks({
					width: '100%',
					height: '100%'
				});
			}
			(function() {
				var canvas = $('#canvas');

				if (!canvas[0].getContext) {
					$("#error").show();
					return false;
				}

				var width = canvas.width();
				var height = canvas.height();

				canvas.attr("width", width);
				canvas.attr("height", height);

				var opts = {
					seed: {
						x: width / 2 - 20,
						color: "rgb(190, 26, 37)",
						scale: 2
					},
					branch: [
						[535, 680, 570, 250, 500, 200, 30, 100, [
							[540, 500, 455, 417, 340, 400, 13, 100, [
								[450, 435, 434, 430, 394, 395, 2, 40]
							]],
							[550, 445, 600, 356, 680, 345, 12, 100, [
								[578, 400, 648, 409, 661, 426, 3, 80]
							]],
							[539, 281, 537, 248, 534, 217, 3, 40],
							[546, 397, 413, 247, 328, 244, 9, 80, [
								[427, 286, 383, 253, 371, 205, 2, 40],
								[498, 345, 435, 315, 395, 330, 4, 60]
							]],
							[546, 357, 608, 252, 678, 221, 6, 100, [
								[590, 293, 646, 277, 648, 271, 2, 80]
							]]
						]]
					],
					bloom: {
						num: 700,
						width: 1080,
						height: 650,
					},
					footer: {
						width: 1200,
						height: 5,
						speed: 10,
					}
				}

				var tree = new Tree(canvas[0], width, height, opts);
				var seed = tree.seed;
				var foot = tree.footer;
				var hold = 0;
				var seedAnimate = eval(Jscex.compile("async", function() {
					seed.draw();
					while (hold) {
						$await(Jscex.Async.sleep(2));
					}
					while (seed.canScale()) {
						seed.scale(0.95);
						$await(Jscex.Async.sleep(2));
					}
					while (seed.canMove()) {
						seed.move(0, 2);
						foot.draw();
						$await(Jscex.Async.sleep(2));
					}
				}));

				var growAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.grow();
						$await(Jscex.Async.sleep(2));
					} while (tree.canGrow());
				}));

				var flowAnimate = eval(Jscex.compile("async", function() {
					do {
						tree.flower(2);
						$await(Jscex.Async.sleep(2));
					} while (tree.canFlower());
				}));

				var moveAnimate = eval(Jscex.compile("async", function() {
					tree.snapshot("p1", 240, 0, 610, 680);
					while (tree.move("p1", 500, 0)) {
						foot.draw();
						$await(Jscex.Async.sleep(2));
					}
					foot.draw();
					tree.snapshot("p2", 500, 0, 610, 680);
					canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
					$await(Jscex.Async.sleep(300));
					canvas.css("background", "none");
				}));

				var jumpAnimate = eval(Jscex.compile("async", function() {
					var ctx = tree.ctx;
					while (true) {
						tree.ctx.clearRect(0, 0, width, height);
						tree.jump();
						foot.draw();
						$await(Jscex.Async.sleep(25));
					}
				}));
				//下面修改起始日期
				var textAnimate = eval(Jscex.compile("async", function() {
					var together = new Date();
					fireworks();
					console.log(together);
					together.setFullYear(2022, 0, 26); //时间年月日 月份0~11
					together.setHours(22); //小时	
					together.setMinutes(22); //分钟
					together.setSeconds(2); //秒前一位
					together.setMilliseconds(2); //秒第二位
					$("#code").show().typewriter();
					$("#clock-box").fadeIn(500);
					while (true) {
						timeElapse(together);
						$await(Jscex.Async.sleep(1000));
					}
				}));

				var runAsync = eval(Jscex.compile("async", function() {
					$await(seedAnimate());
					$await(growAnimate());
					$await(flowAnimate());
					$await(moveAnimate());

					textAnimate().start();

					$await(jumpAnimate());
				}));

				runAsync().start();
			})();
		</script>

		<audio autoplay="autoplay" loop id="music">
			<source src="https://yaoblog.obs.cn-east-3.myhuaweicloud.com:443/gcimages/welcome.m4a" autoplay="autoplay"
				controls="controls" loop="loop" preload="auto">
		</audio>
	</body>
</html>
